.create-group-container{
    width: 640px !important;
    height: 520px;
    padding-bottom: 0;
    .create-group-main{
        width: 598px;
        height: 400px;
        border: 1px solid #D9DEE4;
        border-top: none;
        .create-group-list{
            width: 299px;
            height: 100%;
            float: left;
            position: relative;
            border-right: 1px solid #D9DEE4;
            -webkit-box-sizing: border-box;
                    box-sizing: border-box;
            .create-group-search{
                margin: 16px auto 0;
                width: 260px !important;
            }
            .create-group-scroll{
                width: 100%;
                position: absolute;
                top: 56px;
                bottom: 0;
            }
            .create-group-letter{
                line-height: 20px;
                height: 20px;
                position: relative;
                padding-left: 27px;
                font-size: 12px;
                color: #808080;
                &:after{
                    content: '';
                    display: block;
                    position: absolute;
                    top: 4px;
                    left: 20px;
                    width: 2px;
                    height: 12px;
                    background: #2DD0CF;
                }
            }
        }
        .create-group-select{
            width: 299px;
            float: left;
            position: relative;
            height: 100%;            
            .create-group-select-title{
                font-size: 14px;
                color: #808080;
                line-height: 20px;
                margin: 15px 0 11px 0;
                padding-left: 20px;
            }
            .create-group-scroll-select{
                position: absolute;
                top: 47px;
                right: 0;
                left: 0;
                bottom: 0;
            }
        }
    }
    .create-group-name{
        line-height: 30px;
        margin-top: 20px;
        span{
            font-size: 14px;
            color: #808080;
            &.error{
                font-size: 12px;
                color: #EB424C;
                margin-left: 10px;
            }
        }
        input{
            height: 30px;
            width: 224px;
        }
        .btn-cancel{
            margin-right: 24px;
        }
    }
    .create-group-item{
        >div{
            line-height: 50px;
            height: 50px;
            padding: 0 20px;
            font-size: 14px;
            color: #2C2C2C;
            .create-group-avatar{
                width: 30px;
                height: 30px;
                margin: 10px 10px 0 0;
                overflow: hidden;
                img{
                    width: 100%;
                }
            }
            .create-group-username{
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .create-group-select-label{
                position: relative;
                width: 24px;
                height: 24px;
                margin-top: 13px;
                input{
                    display: none;
                }
                input + b{
                    width: 100%;
                    height: 100%;
                    display: block;
                    background: #fff url(../../../assets/images/select-member-normal.svg) center center no-repeat;
                    background-size: 24px;
                    border-radius: 12px;
                    cursor: pointer;                    
                }
                input:checked + b{
                    background-image: url(../../../assets/images/select-member-active.svg);
                }
                input:disabled + b{
                    background-image: url(../../../assets/images/has-select.svg);
                    cursor: default;
                }
            }
            .create-group-cancel-select{
                cursor: pointer;
                width: 22px;
                height: 22px;
                background: url(../../../assets/images/cancel-select-normal.svg) center center no-repeat;
                background-size: 22px;
                margin-top: 14px;
                &:hover{
                    background-image: url(../../../assets/images/cancel-select-active.svg);
                }
            }
        }
    }
}